<template>
	<div class="main">
		 <div ref="stickyHeader" v-sticky>
			<navTop></navTop>
            <div style="margin-top:15px;"></div>
            <secondNav></secondNav>
        </div>
        <div class="contentMain">
			<div class="contentMainlist">
				<div class="homeworkliststyle">
                    <el-table
						class="custom-table"
					    ref="multipleTable"
					    :data="academclist"
					    tooltip-effect="dark"
					    style="width: 100%"
					    @selection-change="handleSelectionChange"
						stripe
						:header-cell-style="{ background: '#D8E4F0', color: '#2A303B',fontWeight:'500' }">
					   <el-table-column
					      type="selection"
					      width="55">
					    </el-table-column>
					    <el-table-column
					      label="ID"
						    width="150">
					      <template slot-scope="scope">{{ scope.row.id }}</template>
					    </el-table-column>
						<el-table-column
						  label="应届科目">
						  <template slot-scope="scope">
							  {{scope.row.courseName}}
						  </template>
						</el-table-column>
						<el-table-column
						  label="参数">
						  <template slot-scope="scope">
							  <em v-for="item in scope.row.configs">[{{ item.startRanking }},{{ item.endRanking }}];</em>
						  </template>
						</el-table-column>
						<el-table-column
							fixed="right"
							label="操作"
							align="center"
							width="150">
							<template slot-scope="scope">
								<div style="display: flex;">
									<el-button @click="handleClick(scope.row)" type="text" size="small" style="display: flex;align-items: center;"><img src="../../assets/image/school/edit.png" style="width:12px;margin-right:5px;" />编辑</el-button>
									<el-button @click="handledelete(scope.row.id)" type="text" size="small" style="display: flex;align-items: center;color:#EC555A"><img src="../../assets/image/school/del.png" style="width:12px;margin-right:5px;" />删除</el-button>
								</div>
							</template>
						</el-table-column>
					  </el-table> 
                </div>
            </div>
        </div>
        <div class="examfooter">
			<div class="examFootercontent">
				<div class="totaldata">
					<span>已选<i>{{multipleSelection.length}}</i>项 / 共{{academclist.length}}项</span>
					<em @click="addsinglestudent">新增设置</em>
					<em @click="dacdeletmoreplsc">批量删除</em>
				</div>
			</div>
		</div>
		<div class="Generatecomparativeanalysis" v-show="scoreishow">
            <div class="GeneratecomparativeanalysisContent">
                <h3>创建/编辑名次段</h3>
				<div style="padding:15px 0;">
					<span>学科：</span>
					<el-select multiple v-model="courseId" placeholder="全部" clearable :dsabled="editnumber==2?true:false">
						<el-option
						v-for="item in subjectlist"
						:key="item.id"
						:label="item.name"
						:value="item.id">
						</el-option>
					</el-select>
				</div>
				<div class="neirongtable">
					<ul>
						<li>序号</li>
						<li>学生排名</li>
						<li>操作</li>
					</ul>
					<ul v-for="(item,index) in editform" :key="index">
						<li>{{ index+1 }}</li>
						<li><el-input v-model="item.startScore" @input="updateEndScore(index)"></el-input> - <el-input v-model="item.endScore" :disabled="index > 0"></el-input></li>
						<li><em @click="removeItem(index)">删除</em><em @click="addItem">新增</em></li>
					</ul>
				</div>
				<div class="buttonbox">
                    <em @click="sureadddata">保存</em>
                    <em @click="scoreishow=false">返回</em>
                </div>
			</div>
		</div>
    </div>
</template>

<script>
import navTop from "../../components/homework/headtop.vue"
import secondNav from "../../components/homework/secondnav.vue"
import { get,post,put,del } from "../../request/api.js"
export default {
    data() {
        return {
            multipleSelection:[],
			academclist:[],
			editform:[
				this.newFormItem()
			],
			scoreishow:false,
			subjectlist:[],
			courseId:null,
			editnumber:1
        }
    },
	mounted() {
	    this.academclick()
		this.subjectlisttab()
	},
	methods: {
		// 获取科目列表
		subjectlisttab(){
				get('/course/alllist')
				.then(res=>{
					// //console.info(res)
					if(res.code==200){
						this.subjectlist = res.data
					}else{
						this.$message.error(res.message);
					}
				})
			},
	    academclick(){
			get('/rankingstage/list').then(res=>{
			    // //console.info(res)
				if(res.code==200){
					this.academclist = res.data
				}
			})
		},
		newFormItem() {
			return {
				id: 0,
				courseId: 0,
				startRanking:null,
				endRanking: null
			}
		},
		addItem() {
			this.editform.push(this.newFormItem())
		},
		removeItem(index) {
			if (index === 0 && this.editform.length === 1) {
				// 如果是第一个且唯一项，重置为初始值
				const defaultItem = this.newFormItem();
				Object.keys(defaultItem).forEach(key => {
					this.editform[0][key] = defaultItem[key];
				});
			} else {
				this.editform.splice(index, 1);
			}
		},
		// 新增设设置
		addsinglestudent(){
		    this.scoreishow=true
		},
		handledelete(id){
			let ids = [id]
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(() => {
					post('/rankingstage/delete', ids).then(res => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.academclick()
					})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});          
			});
		},
		//批量删除
		dacdeletmoreplsc(){
			if(this.multipleSelection.length>0){
				let ids = this.multipleSelection.map(item => item.id)
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {
						post('/rankingstage/delete', ids).then(res => {
						    this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.academclick()
						})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});          
				});
			}else{
				this.$message({
					type: 'warning',
					message:'请先选择要删除的内容'
				});
			}
		},
		handleSelectionChange(val){
			this.multipleSelection = val;
		},
		//保存
		sureadddata(){
			if(this.editnumber==2){
				const newarry = this.editform.map(item => ({
					startRanking: Number(item.startRanking) || 0,
					endRanking: Number(item.endRanking) || 0,
				}));
				// //console.info('转换后数据:', newarry);
				let obj={
					id:this.editform[0].id,
					courseIds:this.editform[0].courseId,
					configs:newarry
				}
				put('/rankingstage/update',obj).then(res=>{
					// //console.info(res)
					if(res.code==200){
						this.$message({
							message: '编辑成功',
							type: 'success'
						});
						this.scoreishow=false
						this.academclick()
						this.editform = [this.newFormItem()];
					}else{
						this.$message({
							message: res.message,
							type: 'error'
						});
					}
				})
			}else{
				const newarry = this.editform.map(item => ({
					startRanking: Number(item.startRanking) || 0,
					endRanking: Number(item.endRanking) || 0
				}));
				
				// //console.info('转换后数据:', newarry);
				let obj={
					id:0,
					courseIds:this.courseId,
					configs:newarry
				}
				post('/rankingstage/add',obj).then(res=>{
					// //console.info(res)
					if(res.code==200){
						this.$message({
							message: '保存成功',
							type: 'success'
						});
						this.scoreishow=false
						this.academclick()
						this.editform = [this.newFormItem()];
					}else{
						this.$message({
							message: res.message,
							type: 'error'
						});
					}
				})
			}
		},
		//编辑
		handleClick(row){
			let obj={
			    courseId:row.id
			}
			get('/rankingstage/details',obj).then(res=>{
			    if(res.code==200){
					this.editnumber = 2
					this.editform = res.data
					this.courseId = res.data[0].courseId
					this.scoreishow=true
				}
			})
		},
		updateEndScore(index) {
			this.editform[index].endScore = this.editform[index-1].startScore;
		}
	},
    components:{navTop,secondNav}
}
</script>

<style scoped>
    .main{
        box-sizing: border-box;
		width:100vw;
		background: #F4F7FD;
		;
		min-height:100vh;
	}
    .contentMain{
		width:auto;padding:0 40px;
		margin:0 auto;
		padding-bottom:70px;
		height:calc(100vh - 400px);
		position:relative
	}
    .contentMainlist{
		display: flex;
		justify-content: space-between;
		position:relative;
		width:1440px;
		;
		margin:0 auto;
	}
    .homeworkliststyle{
        box-sizing: border-box;
        background:#fff;
        border-radius:10px;
        width:100%;
        padding:20px;
    }
    .examfooter{
		width:100%;
		height:54px;
		background: rgba(255,255,255,0.6);
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		position:fixed;
		left:0;
		bottom:0;
		z-index:100
	}
	.examFootercontent{
		width:auto;padding:0 40px;
		margin:0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.examFootercontent .totaldata{
		font-size:14px;
		color:#557292;
		display: flex;
		justify-content: left;
		align-items: center;
	}
	.examFootercontent .totaldata i{
		display: inline-block;
		color:#295CFF;
		font-style: normal;
		line-height:54px;
		padding:0 3px;
	}
	.examFootercontent .totaldata em{
		font-style:normal;
		width: 96px;
		height: 34px;
		border-radius: 10px;
		line-height:34px;
		background: #295CFF;
		text-align: center;
		color:#fff;
		margin-left:14px;
		cursor: pointer;
	}
	.examFootercontent .totaldata em:last-child{
		background:#EC555A;
	}
	.examFootercontent .totaldata >>> .el-pager li.active{
		background-color:#295CFF
	}
    .custom-table {
	  width: 100%;
	  border: 1px solid rgba(216,228,240,0.34);
	  border-radius:10px;
	  border-right: none;
	  border-bottom:none;
	}
	
	/* 自定义表格内部元素的样式 */
	.custom-table >>> .el-table__header-wrapper th {
	  background-color: #E8F0FA;
	  height:49px;
	  padding:0;
	  text-align: center;
	  font-weight:normal
	}
	.custom-table >>> .el-table__row td {
	  height:42px;
	  padding:0;
	  text-align: center;
	  border-bottom:none;
	  border-right:solid 1px rgba(216,228,240,0.34);
	  font-size:14px;
	}
	.el-table .warning-row {
	    background: #ffffff;
	 }
	.el-table .success-row {
	    background: #D8E4F0;
	}
	.Generatecomparativeanalysis{
        position:fixed;
        left:0;
        top:0;
        background:rgba(0,0,0,0.5);
        width:100%;
        height:100%;
        z-index:112;
    }
    .GeneratecomparativeanalysisContent{
        background:#fff;
        position:fixed;
        width:430px;
        padding:30px;
        left:50%;
        top:50%;
        z-index:113;
        transform: translate(-50%,-50%);
    }
    .GeneratecomparativeanalysisContent h3{
        font-size:18px;
        font-weight:normal
    }
	.GeneratecomparativeanalysisContent >>> .el-input__inner{
	    height:34px;
		border-radius:10px;
	}
	.GeneratecomparativeanalysisContent >>> .el-input__icon{
	    line-height:34px;
	}
	.neirongtable ul:first-child{
	    background:#D8E4F0;
		height:36px;
		border-radius:8px 8px 0 0;
	}
	.neirongtable ul{
		display: flex;
		align-items:center;
		font-size:14px;
		border-right:solid 1px rgba(216,228,240,0.34)
	}
	.neirongtable ul li{
		height:34px;
		text-align: center;
		border-left:solid 1px rgba(216,228,240,0.34);
		border-bottom:solid 1px rgba(216,228,240,0.34);
		line-height:34px;
		padding:8px 0;
	}
	.neirongtable ul:first-child li{
		padding:0;
	}
	.neirongtable ul li:nth-child(1){
		width:80px;
	}
	.neirongtable ul li:nth-child(2){
		width:200px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.neirongtable ul li:nth-child(3){
		width:150px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.neirongtable ul li >>> .el-input__inner{
	    width:50px;
		padding:0;
		text-align: center;
		height:34px;
		line-height:34px;
	}
	.neirongtable ul li em{
		display: flex;
		font-style:normal;
		color:#295CFF;
		margin:0 8px;
		cursor: pointer;
	}
	.neirongtable ul li em:first-child{
	    color:#EC555A
	}
	.buttonbox{
        padding-top:15px;
    }
    .buttonbox em{
        display: inline-block;
        width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		font-size: 14px;
		color: #FFFFFF;
        text-align: center;
        line-height:34px;
        cursor: pointer;
    }
    .buttonbox em:last-child{
        background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		color:#295CFF;
		margin-left:24px;
    }
</style>